import React, { useEffect } from 'react'

import { useDispatch, useSelector } from 'react-redux'
import { loadDataForSaga } from '../actionCreater'

import CookBookUi from '../ui/CookBookUi'

function CookBook() {
  const list = useSelector(state => state.getIn(['home', 'list']))
  const dispatch = useDispatch()

  useEffect(
    () => {
      dispatch(loadDataForSaga())
    },
    [dispatch]
  )

  return (
    <CookBookUi 
      list={list}
    ></CookBookUi>
  )
}

export default CookBook